<script setup>
import { ref } from 'vue';
const popupRef=ref(null)
//打开弹出层
const popupOpen=()=>{
	 popupRef.value.open()
}
// 关闭弹出层
const popupClose=()=>{
	popupRef.value.close()
}

defineExpose({
	popupOpen,
	popupClose
})


const props=defineProps({
	//订单id
	orderId:String,
	 // 待支付金额
	amount: {
	    type: [String, Number],
	    default: 0
	  }
})
//定义支付方式
const paymentList=[
	{icon:'/static/images/wechatpay-icon.png',title:'微信支付'},
	{icon:'/static/images/alipay-icon.png',title:'支付宝支付'}
]

//定义自定义事件
const emit=defineEmits(['onChoose','close','confirm'])
//定义高亮初始值
const activeIndex=ref(0)
//点击切换支付方式
const onChooseActive=(index)=>{
	activeIndex.value=index
	emit('onChoose',{paymentMethod:index})
}


</script>

<template>
	<uni-popup ref="popupRef" type="bottom" :is-mask-click="false">
		<view class="payment-container">
		      <view class="payment-header">
		        <text class="title">选择支付方式</text>
		        <uni-icons
		          class="uni-icons-close" size="18" color="#333" type="closeempty" @click="$emit('close')"
		        />
		      </view>
		      <view class="order-amount">¥ {{props.amount}}元</view>
		      <uni-list :border="false">
		        <uni-list-item
						v-for="(item,index) in paymentList"
						:key="item.title"
		          :title="item.title"
		          :thumb="item.icon"
							@click="onChooseActive(index)"
							clickable
		        >
		          <template #footer>
		            <uni-icons
		                v-if="activeIndex === index"
		                 size="26"
		                 color="#16C2A3"
		                 type="checkbox-filled"
		                  />
		            <uni-icons v-else size="26" color="#d1d1d1" type="circle" />
		          </template>
		        </uni-list-item>
		      </uni-list>
		      <button class="uni-button" @click="$emit('confirm')">立即支付</button>
		    </view>
	</uni-popup>
</template>

<style lang="scss">
.payment-container {
  min-height: 400rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;
  padding: 10rpx 30rpx 40rpx;

  .payment-header {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333;
    position: relative;
  }

  .uni-icons-close {
    position: absolute;
    top: 2rpx;
    right: 0;
  }

  .order-amount {
    padding: 10rpx 0 10rpx;
    text-align: center;
    font-size: 40rpx;
    color: #333;
  }

  :deep(.uni-list-item__container) {
    padding: 40rpx 0 !important;
  }

  :deep(.uni-list-item--hover) {
    background-color: #fff !important;
  }

  :deep(.uni-list-item__icon) {
    margin-right: 0;
  }

  .uni-button {
    margin-top: 40rpx;
  }
}
</style>